<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="author" content="Lancer" />
	<script type="text/javascript" src="../../jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../../js/jquery.czRadio.js"></script>
    <link rel="stylesheet" type="text/css" href="../../themes/czRadio.css"  />
    <title>czCheckbox</title>
  
  	<script type="text/javascript">
    $(document).ready(function() {

		$('#radiolist1').czRadio({
			initCallback: function() {	
				log( 'init successfully.' );	
			},
		
			forbidCallback: function() {
				alert( this.getValue() + ' is not allow checked.');
			},
			changeCallback: function() {	   
				alert( 'change: ' + this.getCheckedValue() + ' is checked.');
			}
		});

			
		$('#radiolist2').czRadio({
			inputName : 'language',
			changeCallback: function() {	   
				alert( 'change: ' + this.getCheckedValue() + ' is checked.');
			}
		});
      
		$("#setGerman").bind('click', function() {
			$('#radiolist2').czRadio('instance').setChecked($('#German'));
		});
			
		$("#setKorean").bind('click', function() {
			$('#radiolist2').czRadio('instance').setChecked('KR');
		});
    });
		
	function log($message) {
		var debug = true;
		if ( debug ) {
			if (window.console && window.console.log)
				window.console.log($message);
			else
				alert($message);
		} else {
			alert($message);
		} 
	}
  	</script>
</head>

<body>
<table id="radiolist1" width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="right">Demo 1</td>
    <td colspan="2">Choose your favorite hobby(Only one):</td>
  </tr>
  <tr>
    <td width="60" align="right"></td>
    <td width="30"><input type="Radio" id="Football" value="football" name="Hobby" /></td>
    <td><label for="Football">Football</label></td>
  </tr>
  <tr>
    <td align="right"></td>
    <td width="30"><input type="Radio" id="Volleyball" value="volleyball" name="Hobby" /></td>
    <td><label for="Volleyball">Volleyball</label></td>
  </tr>
  <tr>
    <td align="right"></td>
    <td width="30"><input checked="checked" type="Radio" id="Basketball" value="basketball" name="Hobby" /></td>
    <td><label for="Basketball">Basketball</label></td>
  </tr>
  <tr>
    <td align="right"></td>
    <td width="30"><input type="Radio" id="Swimming" value="swimming" name="Hobby" disabled="disabled" /></td>
    <td><label for="Swimming">Swimming</label></td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
    <td colspan="8">
    <input value="getCheckedValue" onclick="alert($('#radiolist1').czRadio('instance').getCheckedValue())" type="button" />
    <input value="getCheckedText" onclick="alert($('#radiolist1').czRadio('instance').getCheckedText())" type="button" />
    <input value="checkVolleyball" onclick="$('#radiolist1').czRadio('instance').setChecked('volleyball');" type="button" /><br />
    <input value="set volleyball able" onclick="$('#radiolist1').czRadio('instance').setAbled('volleyball');" type="button" />
    <input value="set volleyball disabled" onclick="$('#radiolist1').czRadio('instance').setDisabled('volleyball');" type="button" />
    </td>
  </tr>
</table>

<table id="radiolist2" width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="60" align="right">Demo 2</td>
    <td colspan="8" align="left">Choose your mastery of the language</td>
  </tr>
  <tr>
    <td width="60" align="right">&nbsp;</td>
    <td width="40"><input type="Radio" id="English" value="EN" name="language" /></td>
    <td><label for="Englis">English</label></td>
    <td width="40"><input type="Radio" id="German" value="GE" name="language" /></td>
    <td><label for="German">German</label></td>
    <td width="40"><input type="Radio" id="French" value="FR" name="language" /></td>
    <td><label for="French">French</label></td>
    <td width="40"><input type="Radio" id="Japanese" value="JP" name="language" /></td>
    <td><label for="Japanese">Japanese</label></td>
  </tr>
  <tr>
    <td width="60" align="right">&nbsp;</td>
    <td width="40"><input type="Radio" id="Chinese" value="ZH" name="language" /></td>
    <td><label for="Chinese">Chinese</label></td>
    <td width="40"><input type="Radio" id="Korean" value="KR" name="language" /></td>
    <td><label for="Korean">Korean</label></td>
    <td width="40"></td>
    <td></td>
    <td width="40"></td>
    <td></td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
    <td colspan="8">
    	<input id="setGerman" value="Checked German" type="button" />
    	<input id="setKorean" value="Checked Korean" type="button" />
    </td>
  </tr>
</table>
</body>
</html>
